<template>
	<div class="box">
		<div class="serch">
			<span><uni-icons type="search" size="20"></uni-icons></span>
			<input class="uni-input" focus placeholder="  请输入关键词" style="display: inline-block; font-size: 30rpx;" />
		</div>
		<div style="text-align: right;padding-right: 50rpx;" @click="open">
			<span>筛选</span>
			<span><uni-icons type="bars" size="20"></uni-icons></span>
		</div>
		<uni-popup ref="popup" type="right" background-color="white">
			<div class="right_tc">
				<div class="right_xbox">筛选</div>
				<div class="right_xbox"></div>
				<div class="right_xbox">类型：</div>
				<div class="right_xbox">
					<radio-group class="uni-list" @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioItems" :key="index">
							<radio :id="item.name" :value="item.name" style="transform:scale(0.5)" :checked="item.checked"></radio>
							<label class="label-2-text" :for="item.name">
								<text>{{ item.value }}</text>
							</label>
						</label>
					</radio-group>
				</div>
				<div class="right_xbox">价格：</div>
				<div class="right_xbox">
					<input placeholder="请输入" style="display: inline-block;width: 200rpx;line-height: 100rpx;border: 1px solid black;" />
					<span class="lin_h">元-</span>
					<input placeholder="请输入" style="display: inline-block;width: 200rpx;line-height: 100rpx;border: 1px solid black;" />
					<span class="lin_h">元</span>
				</div>
				<div class="right_xbox">状态：</div>
				<div class="right_xbox">
					<radio-group class="uni-list" @change="radioChange1">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioItems1" :key="index">
							<radio :id="item.name" :value="item.name" style="transform:scale(0.5)" :checked="item.checked"></radio>
							<label class="label-2-text" :for="item.name">
								<text>{{ item.value }}</text>
							</label>
						</label>
					</radio-group>
				</div>
				<div class="right_xbox"></div>
				<div class="right_xbox">
					<button type="default" style="width: 45%;display: inline-block;height: 80rpx;line-height: 80rpx;" @click="close">取消</button>
					<button type="primary" style="width: 45%;display: inline-block;height: 80rpx;line-height: 80rpx;margin-left: 20rpx;">确认</button>
				</div>
			</div>
		</uni-popup>
		<div class="main">
			<navigator url="/pages/commodity/commodity?id=2">
				<div class="main_box" v-for="(item, index) in userDiv" :key="index" @click="router_push">
					<div class="main_img"><img class="img" :src="item.work_img" alt="" /></div>
					<div class="main_text">
						<div>{{ item.work_name }}</div>
						<div></div>
					</div>
					<div class="main_text">
						<div class="left_text">艺术家</div>
						<div style="display: flex;align-items: center;justify-items: center;">
							<img :src="item.work_userimg" alt="" class="user_img" />
							<div class="gz"></div>
							<div>{{ item.work_user }}</div>
						</div>
					</div>
					<div class="main_text">
						<div class="left_text">价格</div>
						<div class="many">￥{{ item.work_money }}</div>
					</div>
				</div>
			</navigator>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 作品div的模拟数据
			userDiv: [
				{
					work_img: 'http://rco8i11co.hn-bkt.clouddn.com/login_user.png',
					work_name: '鹤鸣',
					work_user: '张三',
					work_userimg: 'http://rco8i11co.hn-bkt.clouddn.com/login_user.png',
					work_money: '5.00'
				},
				{
					work_img: 'http://rco8i11co.hn-bkt.clouddn.com/login_user.png',
					work_name: '鸡叫',
					work_user: '王五',
					work_userimg: '摸',
					work_money: '5.00'
				},
				{
					work_img: 'http://rco8i11co.hn-bkt.clouddn.com/login_user.png',
					work_name: '哈哈',
					work_user: '李四',
					work_userimg: '1摸',
					work_money: '5.00'
				}
			],
			// 侧边栏的模拟数据
			radioItems: [
				{
					name: 'USA',
					value: '衍生品'
				},
				{
					name: 'CHN',
					value: '版权品',
					checked: 'true'
				}
			],
			// 侧边栏的模拟数据
			radioItems1: [
				{
					name: '1',
					value: '在售'
				},
				{
					name: '2',
					value: '售空'
				}
			]
		};
	},
	methods: {
		open() {
			//右侧弹窗
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popup.open('right');
		},
		close() {
			//右侧弹窗关闭
			this.$refs.popup.close();
		},
		radioChange: function(evt) {
			//单选框
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		},
		radioChange1: function(evt) {
			//单选框
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		}
	}
};
</script>
<style lang="less">
.lin_h {
	height: 100rpx;
	line-height: 100rpx;
}
.box {
	width: 100vw;
	height: 100vh;
	background-color: rgb(250, 250, 250);
	.serch {
		width: 90%;
		margin: 0 auto;
		background-color: white;
		border-radius: 50rpx;
		border: 1rpx solid rgb(233, 233, 233);
		padding: 0 30rpx;
	}
	.right_tc {
		width: 600rpx;
		display: flex;
		flex-wrap: wrap;
		.right_xbox {
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 5rpx;
		}
	}
	.main {
		width: 100%;
		padding-top: 30rpx;
		.main_box {
			margin: 0 auto;
			margin-bottom: 30rpx;
			width: 90%;
			height: 800rpx;
			border: 1px solid rgb(129, 129, 129);
			padding-top: 20rpx;
			position: relative;
			.main_img {
				width: 90%;
				margin: 0 auto;
				height: 480rpx;
				.img {
					width: 100%;
					height: 480rpx;
					background-size: cover;
				}
			}
			.gz {
				position: absolute;
				top: 40rpx;
				right: 50rpx;
				width: 80rpx;
				height: 40rpx;
				background-color: black;
			}
			.main_text {
				box-sizing: border-box;
				padding: 0 10rpx;
				width: 90%;
				margin: 0 auto;
				height: 100rpx;
				// border: 1px solid green;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				justify-items: center;
				align-content: center;
				.left_text {
					color: rgb(185, 185, 185);
					font-size: 30rpx;
					line-height: 100rpx;
				}
				.many {
					color: goldenrod;
					font-size: 30rpx;
					line-height: 100rpx;
				}
				.user_img {
					margin-right: 10rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 1px solid red;
				}
			}
		}
	}
}
</style>
